<template>
    <div class="p-2">
        <el-row :gutter="20">
            <el-col :lg="4" :xs="24" style="">
                <el-card shadow="hover">
                    <el-input v-model="geName" placeholder="请输入世代名称" prefix-icon="Search" clearable />
                    <el-tree
                        ref="geTreeRef"
                        class="mt-2"
                        node-key="id"
                        :data="deptOptions"
                        :props="{ label: 'label', children: 'children' } as any"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        highlight-current
                        default-expand-all
                        @node-click="handleNodeClick"
                    />
                </el-card>
            </el-col>
            <el-col :lg="20" :xs="24">
                <el-form ref="infoFormRef" :model="form"  label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="名称" prop="nickName">
                            <el-input v-model="form.infoName" placeholder="请输入名称" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
  
<script setup name="User" lang="ts">
import { InfoVO,InfoForm } from '@/api/genealogy/info/types';

const infoFormRef = ref<ElFormInstance>();
const geName = ref('');
const deptOptions = ref<InfoVO[]>([]);

const form:InfoForm = {
    infoType: undefined,
    infoName:undefined,
    remark:undefined
}

/** 通过条件过滤节点  */
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

/** 节点单击事件 */
const handleNodeClick = (data: InfoVO) => {

};

</script>
  